<template>
    <div :class="$store.state.collapseClass">
        <!--logo-->
        <h5 class="main-logo">
            <img src="../../assets/kgc.png" alt="">
            <span v-show="!$store.state.isCollapse" class="logo-info">KGC后台管理</span>
        </h5>
        <el-menu
            class="el-menu-vertical-demo"
            :unique-opened="true"
            background-color="#304156"
            text-color="#fff"
            :collapse="$store.state.isCollapse"
            :collapse-transition="false"
            :router="true"
            :default-active="$route.path"
            active-text-color="#ffd04b">

            <!--            没有二级菜单  v-if="!item.children"-->
            <el-menu-item :index="item.path" v-for="(item,idx) in menuData" :key="idx" v-if="!item.children">
                <i :class="item.icon"></i>
                <span slot="title">{{item.title}}</span>
            </el-menu-item>

            <!--          含有二级菜单  -->
            <el-submenu :index="idx+''"  :key="idx" v-else>
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="sitem.path" :key="sidx" v-for="(sitem,sidx) in item.children">{{sitem.title}}</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: "NavBar",
    data() {
        return {
            /*menuData: [*/
            /*    {*/
            /*        title: '首页',*/
            /*        path:'/home'*/
            /*    },*/
            /*    {*/
            /*        title: '系统管理',*/
            /*        children: [*/
            /*            {*/
            /*                title: '用户管理',*/
            /*                path:'/user'*/
            /*            },*/
            /*            {*/
            /*                title: '角色管理',*/
            /*                path:'/role'*/
            /*            },*/
            /*            {*/
            /*                title: '权限管理',*/
            /*                path:'/auth'*/
            /*            },*/
            /*            {*/
            /*                title: '部门管理',*/
            /*                path:'/dept'*/
            /*            },*/
            /*            {*/
            /*                title: '日志管理',*/
            /*                path:'/log'*/
            /*            }*/
            /*        ]*/
            /*    },*/
            /*    {*/
            /*        title: '基础管理',*/
            /*        children: [*/
            /*            {*/
            /*                title: '客户管理',*/
            /*                path:'/client'*/
            /*            },*/
            /*            {*/
            /*                title: '供应商管理',*/
            /*                path:'/supplier'*/
            /*            },*/
            /*            {*/
            /*                title: '商品管理',*/
            /*                path:'/commodity'*/
            /*            }*/
            /*        ]*/
            /*    },*/
            /*    {*/
            /*        title: '进货管理',*/
            /*        children: [*/
            /*            {*/
            /*                title: '商品进货',*/
            /*                path:'/commodityImport'*/
            //             },
            //             {
            //                 title: '商品退货查询',
            //                 path:'/commodityExport'
            //             }
            //         ]
            //     },
            //     {
            //         title: '销售管理',
            //         children: [
            //             {
            //                 title: '商品销售',
            //                 path:'/sale'
            //             },
            //             {
            //                 title: '销售退货查询',
            //                 path:'/saleExport'
            //             }
            //         ]
            //     },
            //     {
            //         title: '资源中心',
            //         children: [
            //             {
            //                 title: '模板',
            //                 path:'/file'
            //
            //             }
            //
            //         ]
            //     },
            //     {
            //         title: '数据展示',
            //         children: [
            //             {
            //                 title: '数据展示',
            //                 path:'/data'
            //             }
            //
            //         ]
            //     }
            // ]
            //  this.$store.state.isCollapse 从vuex中获取参数
            // isCollapse: this.$store.state.isCollapse
            menuData: this.$store.state.menuData // 动态获取菜单
        }
    },
}
</script>

<style scoped>
.navbar {
    width: 240px;
    height: 100%;
    position: relative;
    background-color: #304156;
    box-shadow: 5px 0 5px #ccc;
}
.navbar-collapse{
    width: 64px;
}

.el-menu{
    border: none;
}

.main-logo{
    color: white;
    text-align: center;
}
.main-logo img{
    width: 63px;
    vertical-align: middle;
}
</style>